<script setup lang='ts'>
import { getTeamDetail, getTeamDetailMember, getTeamImg } from '@/api/team';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import img from '@/assets/微信图片_20230708224126.jpg'
import { teamStatusEnum } from '@/constants/team';
import { getCurrentUser } from '@/api/user';
import { showToast } from 'vant';

const router = useRouter()
const route = useRoute()
const id = route.query.id
const team = ref()
const teamMember = ref()
const teamImage = ref()
// 获取队伍信息
const getTeamInfo = async () => {
  const res = await getTeamDetail(id)
  if(res.data.code === 0){
    team.value = res.data.data
    teamImage.value = res.data.data.coverImage
  }
}

// 获取队伍成员信息
const getTeamMember = async () => {
  const res = await getTeamDetailMember(id)
  teamMember.value = res.data.data
  teamMember.value.forEach((member: { tags: string; }) => {
    member.tags = JSON.parse(member.tags)
  })
}

// 获取用户信息
const user = ref()
const getUserInfo = async () => {
  const res = await getCurrentUser()
  user.value = res.data.data
}

// 跳转聊天室
const toChat = () => {
  if(!team.value.hasJoin){
    showToast('您还不是该队伍成员！')
    return
  }
  router.push({
    path: '/chat',
    query: {
      teamId: team.value.id,
      teamName: team.value.name,
      teamType: 2
    }
  })
}


onMounted(() => {
  getTeamInfo(),
  getTeamMember(),
  getUserInfo()
})

// 修改队伍头像
const afterRead = async (file) => {
  const formData = new FormData()
  console.log(file.objectUrl)
  formData.append('file',file.file)
  formData.append('id',team.value.id)
  const res = await getTeamImg(formData)
  if(res.data.code === 0){
    showToast('修改成功')
  }
  teamImage.value = file.objectUrl
}
</script>
<template>
  <div v-if="team">
    <div class="header">
      <van-row>
        <van-col span="8">
          <van-image
            round
            width="88"
            height="88"
            fit="cover"
            :src="teamImage ?? img"
          />
        </van-col>
        <van-col span="16">
          <van-space direction="vertical" fill>
            <h3 style="margin: 2px 0;">{{ team.name }}</h3>
            <p class="userAccount">{{ '队伍描述：'+ (team.description??'队伍暂时无描述') }}</p>
          </van-space>
        </van-col>
      </van-row>
    </div>
    <van-cell-group inset>
      
      <van-cell icon="photo-o" title="队伍头像" v-if="team.userId==user?.id">
        <template #value>
          <van-uploader :max-count="1" :after-read="afterRead">
             <van-button icon="plus" type="primary" style="height: 35px;">点击修改</van-button>
        </van-uploader>
        </template>
      </van-cell>
      <van-cell icon="user-o" title="队长" :value="team.leaderName"/>
      <van-cell icon="closed-eye" title="队伍状态" :value="teamStatusEnum[team.status]"/>
      <van-cell icon="underway-o" title="过期时间" :value="team.expireTime??'永不过期'"/>
      <van-cell icon="chat-o" title="队伍聊天室" is-link @click="toChat" />
    </van-cell-group>
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      成员
    </van-divider>
    <TeamMemberList :user-list="teamMember" @delMember="getTeamMember" ></TeamMemberList>
    <van-empty style="margin-top: 30px;" v-if="!teamMember || teamMember.length<1"  image-size="80" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" description="该队伍还没有其他成员加入" />
  </div>
</template>
<style scoped >
*{
  margin: 0;
  padding: 0;
}
.header{
  margin: 16px;
}
.userAccount{
  color: #a7a4a4;
}
.van-cell{
  padding: 10px 16px;
}

</style>
